<template>
  <section class="ai-assistant" id="ai-assistant">
    <div class="container">
      <h2 class="section-title">{{ t('aiSmartAssistant') }}</h2>
      <p class="ai-description">{{ t('aiDescription') }}</p>
      
      <div class="ai-chat">
        <input 
          type="text" 
          class="chat-input" 
          v-model="chatInput"
          :placeholder="t('enterQuestion')"
          @keypress.enter="askAI"
        >
        <button class="chat-button" @click="askAI" :disabled="isLoading">
          <span v-if="!isLoading">{{ t('askAI') }}</span>
          <div v-else class="loading"></div>
        </button>
        <div class="chat-response" v-if="chatResponse" v-html="chatResponse"></div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'
import { useI18n } from '../composables/useI18n'

const { t, getCurrentLang } = useI18n()

const chatInput = ref('')
const chatResponse = ref('')
const isLoading = ref(false)

const askAI = async () => {
  if (!chatInput.value.trim()) return

  isLoading.value = true
  
  // Mock AI response (In real implementation, this would call DeepSeek API)
  setTimeout(() => {
    const responses = {
      zh: [
        '根据您的需求，我推荐智能家居系统，它能够为您提供便捷的生活体验。',
        '我们的工业自动化设备采用最新技术，可以显著提升您的生产效率。',
        '基于您的预算和需求，医疗电子设备是一个很好的选择。',
        '安防监控系统能够为您提供全天候的安全保障，支持远程监控。'
      ],
      en: [
        'Based on your needs, I recommend the smart home system for convenient living experience.',
        'Our industrial automation equipment uses the latest technology to significantly improve your production efficiency.',
        'Based on your budget and requirements, medical electronics is an excellent choice.',
        'The security monitoring system provides 24/7 security with remote monitoring support.'
      ]
    }

    const randomResponse = responses[getCurrentLang()][Math.floor(Math.random() * responses[getCurrentLang()].length)]
    
    chatResponse.value = `
      <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
        <i class="fas fa-robot" style="color: #3498db;"></i>
        <strong>DeepSeek AI:</strong>
      </div>
      <p>${randomResponse}</p>
      <div style="margin-top: 10px; font-size: 0.9em; opacity: 0.8;">
        ${getCurrentLang() === 'zh' ? '如需更详细的咨询，请联系我们的专业团队。' : 'For more detailed consultation, please contact our professional team.'}
      </div>
    `
    
    isLoading.value = false
    chatInput.value = ''
  }, 2000)
}
</script>

<style scoped>
.ai-assistant {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: white;
  padding: 3rem 0;
  text-align: center;
}

@media (min-width: 768px) {
  .ai-assistant {
    padding: 5rem 0;
  }
}

.section-title {
  font-size: 2rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 2.5rem;
  }
}

.ai-description {
  font-size: 1rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

@media (min-width: 768px) {
  .ai-description {
    font-size: 1.1rem;
  }
}

.ai-chat {
  max-width: 600px;
  margin: 2rem auto;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
}

@media (min-width: 768px) {
  .ai-chat {
    padding: 2rem;
  }
}

.chat-input {
  width: 100%;
  padding: 1rem;
  border: none;
  border-radius: 25px;
  font-size: 1rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.9);
}

.chat-button {
  background: linear-gradient(45deg, #3498db, #2980b9);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  min-width: 120px;
}

.chat-button:hover:not(:disabled) {
  transform: scale(1.05);
}

.chat-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.chat-response {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  text-align: left;
}

.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}
</style>
